<template>
  <div class="emoji-picker" v-if="show" @click.stop>
    <div class="emoji-picker-header">
      <span class="emoji-picker-title">选择表情</span>
      <el-button type="text" @click="$emit('close')" class="close-btn">
        <el-icon><Close /></el-icon>
      </el-button>
    </div>
    
    <div class="emoji-categories">
      <el-button
        v-for="category in categories"
        :key="category.name"
        :type="selectedCategory === category.name ? 'primary' : 'text'"
        size="small"
        @click="selectedCategory = category.name"
        class="category-btn"
      >
        {{ category.icon }}
      </el-button>
    </div>
    
    <div class="emoji-grid">
      <div
        v-for="emoji in currentEmojis"
        :key="emoji"
        class="emoji-item"
        @click="selectEmoji(emoji)"
        :title="emoji"
      >
        {{ emoji }}
      </div>
    </div>
    
    <div class="emoji-picker-footer">
      <div class="recent-emojis" v-if="recentEmojis.length > 0">
        <span class="footer-label">最近使用:</span>
        <div class="recent-list">
          <span
            v-for="emoji in recentEmojis"
            :key="emoji"
            class="recent-emoji"
            @click="selectEmoji(emoji)"
            :title="emoji"
          >
            {{ emoji }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'

interface Props {
  show: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  select: [emoji: string]
  close: []
}>()

// 表情分类
const categories = [
  { name: 'smileys', icon: '😀', emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '😎', '🤓', '🧐'] },
  { name: 'gestures', icon: '👋', emojis: ['👋', '🤚', '🖐', '✋', '🖖', '👌', '🤏', '✌', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝', '👍', '👎', '👊', '✊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✍', '💅', '🤳', '💪', '🦾', '🦿', '🦵', '🦶', '👂', '🦻', '👃', '🧠', '🦷', '🦴', '👀', '👁', '👅', '👄'] },
  { name: 'hearts', icon: '❤️', emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟'] },
  { name: 'objects', icon: '🎈', emojis: ['🎈', '🎉', '🎊', '🎁', '🎀', '🎂', '🍰', '🧁', '🍭', '🍬', '🍫', '🍩', '🍪', '🍯', '🍺', '🍻', '🥂', '🍷', '🍸', '🍹', '🍾', '☕', '🍵', '🥤', '🧃', '🧉', '🧊', '🥢', '🍽', '🍴', '🥄', '🔪', '🏺'] },
  { name: 'nature', icon: '🌱', emojis: ['🌱', '🌿', '🍀', '🌾', '🌵', '🌲', '🌳', '🌴', '🌰', '🌰', '🌻', '🌺', '🌸', '🌼', '🌷', '🥀', '🌹', '🌞', '🌝', '🌛', '🌜', '🌚', '🌕', '🌖', '🌗', '🌘', '🌑', '🌒', '🌓', '🌔', '🌙', '⭐', '🌟', '💫', '✨', '☄', '☀', '🌤', '⛅', '🌥', '☁', '🌦', '🌧', '⛈', '🌩', '🌨', '❄', '☃', '⛄', '🌬', '💨', '🌪', '🌫', '🌈', '☔', '⚡', '🔥', '💧', '🌊'] },
  { name: 'animals', icon: '🐶', emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🦍', '🦧', '🐕', '🐩', '🦮', '🐕‍🦺', '🐈', '🐓', '🦃', '🦚', '🦜', '🦢', '🦩', '🕊', '🐇', '🦝', '🦨', '🦡', '🦦', '🦥', '🐁', '🐀', '🐿', '🦔'] },
  { name: 'food', icon: '🍎', emojis: ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒', '🌶', '🫑', '🌽', '🥕', '🫒', '🧄', '🧅', '🥔', '🍠', '🥐', '🥖', '🍞', '🥨', '🥯', '🧀', '🥚', '🍳', '🧈', '🥞', '🧇', '🥓', '🥩', '🍗', '🍖', '🦴', '🌭', '🍔', '🍟', '🍕'] },
  { name: 'activities', icon: '⚽', emojis: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🎱', '🪀', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🪃', '🥅', '⛳', '🪁', '🏹', '🎣', '🤿', '🥊', '🥋', '🎽', '🛹', '🛷', '⛸', '🥌', '🎿', '⛷', '🏂', '🪂', '🏋️‍♀️', '🏋️', '🏋️‍♂️', '🤼‍♀️', '🤼', '🤼‍♂️', '🤸‍♀️', '🤸', '🤸‍♂️', '⛹️‍♀️', '⛹️', '⛹️‍♂️', '🤺', '🤾‍♀️', '🤾', '🤾‍♂️', '🏌️‍♀️', '🏌️', '🏌️‍♂️', '🏇', '🧘‍♀️', '🧘', '🧘‍♂️', '🏄‍♀️', '🏄', '🏄‍♂️', '🏊‍♀️', '🏊', '🏊‍♂️', '🤽‍♀️', '🤽', '🤽‍♂️', '🚣‍♀️', '🚣', '🚣‍♂️', '🧗‍♀️', '🧗', '🧗‍♂️', '🚵‍♀️', '🚵', '🚵‍♂️', '🚴‍♀️', '🚴', '🚴‍♂️', '🏆', '🥇', '🥈', '🥉', '🏅', '🎖', '🏵', '🎗', '🎫', '🎟', '🎪', '🤹', '🤹‍♂️', '🤹‍♀️', '🎭', '🩰', '🎨', '🎬', '🎤', '🎧', '🎼', '🎵', '🎶', '🪘', '🥁', '🎷', '🎺', '🎸', '🪕', '🎻', '🎲', '♠', '♥', '♦', '♣', '🃏', '🀄', '🎴', '🎯', '🎳'] }
]

const selectedCategory = ref('smileys')
const recentEmojis = ref<string[]>([])

// 当前显示的表情
const currentEmojis = computed(() => {
  const category = categories.find(cat => cat.name === selectedCategory.value)
  return category ? category.emojis : []
})

// 选择表情
const selectEmoji = (emoji: string) => {
  // 添加到最近使用
  addToRecent(emoji)
  // 发送选择事件
  emit('select', emoji)
}

// 添加到最近使用
const addToRecent = (emoji: string) => {
  const index = recentEmojis.value.indexOf(emoji)
  if (index > -1) {
    recentEmojis.value.splice(index, 1)
  }
  recentEmojis.value.unshift(emoji)
  
  // 限制最近使用数量
  if (recentEmojis.value.length > 20) {
    recentEmojis.value = recentEmojis.value.slice(0, 20)
  }
  
  // 保存到本地存储
  localStorage.setItem('emoji_recent', JSON.stringify(recentEmojis.value))
}

// 从本地存储加载最近使用的表情
const loadRecentEmojis = () => {
  const saved = localStorage.getItem('emoji_recent')
  if (saved) {
    try {
      recentEmojis.value = JSON.parse(saved)
    } catch (error) {
      console.error('Failed to load recent emojis:', error)
    }
  }
}

onMounted(() => {
  loadRecentEmojis()
})
</script>

<style scoped>
.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 320px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.emoji-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.emoji-picker-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.close-btn {
  padding: 4px;
  color: #6b7280;
}

.emoji-categories {
  display: flex;
  padding: 8px 12px;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.category-btn {
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  border-radius: 8px;
}

.emoji-grid {
  flex: 1;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.emoji-item:hover {
  background-color: #f3f4f6;
}

.emoji-picker-footer {
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.footer-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  display: block;
}

.recent-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.recent-emoji {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.recent-emoji:hover {
  background-color: #e5e7eb;
}

/* 暗色主题支持 */
.dark .emoji-picker {
  background: #1f2937;
  border-color: #374151;
}

.dark .emoji-picker-title {
  color: #f9fafb;
}

.dark .emoji-item:hover {
  background-color: #374151;
}

.dark .emoji-picker-footer {
  background-color: #111827;
  border-color: #374151;
}

.dark .recent-emoji:hover {
  background-color: #374151;
}
</style>
